<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<title>物料工艺</title>
</head>

<body>
	<div id="app" v-loading.fullscreen.lock="loading">
		<!-- 查询条件 -->
		<div class='searchDiv'>
			<el-form class='elForm'>
				<el-form-item label="查询">
					<el-select style="width:80px;" placeholder="请选择状态" v-model='search.status'>
						<el-option value="" label="全部"></el-option>
						<el-option v-for="status in status" :key="status.id" :label="status.name" :value="status.id"></el-option>
					</el-select>
					<el-input v-model="search.materialTypeWhere" placeholder="物料类型" class="form-input" style="width:100px;"></el-input>
					<el-input v-model="search.technologyWhere" placeholder="请输入工艺名称" class="form-input" style="width:160px;"></el-input>
					<el-button type="primary" @click="getMaterialTechnology(true)">查询</el-button>
					<el-button type="primary" @click="exportExcle()">导出EXCEL</el-button>
				</el-form-item>
			</el-form>


			<el-form class='elForm2'>
				<el-form-item label="添加">
					<el-select filterable class="form-input" placeholder="请选择物料类型" v-model="addParam.materialType" style="width:100px;" >
						<el-option value="" label="全部"></el-option>
						<el-option v-for="materialType in materialTypeList" :key="materialType" :label="materialType" :value="materialType"></el-option>
					</el-select>
					<el-input v-model="addParam.technology" placeholder="请输入工艺名称" class="form-input"></el-input>
					<el-button type="primary" @click="addMaterialTechnology()">添加</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div style="margin-top:10px;padding:0 10px;">   
			<el-table fit stripe border :data="materialTechnologyList" style="width:100%;">
				<el-table-column :resizable="false" prop="materialType" label="物料类型" ></el-table-column>
				<el-table-column :resizable="false" prop="technology" label="工艺" ></el-table-column>
				<el-table-column :resizable="false" label="状态" >
					<template slot-scope="scope">
					    <span v-if=" scope.row.status==0">使用</span>
					    <span v-else>禁用</span>
					</template>
				</el-table-column>
				<el-table-column :resizable="false" label="操作" >
				     <template slot-scope="scope">
					     <el-button type="text" size="small" v-if=" scope.row.status==0" @click="setStatus(scope.row,2)">禁用</el-button>
					     <el-button type="text" size="small" v-else @click="setStatus(scope.row,0)">使用</el-button>
    					 <el-button type="text" size="small" @click="updateDialogShow(scope.row)">修改</el-button>
   					 </template>
				</el-table-column>
			</el-table>  
		</div> 
		<div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
	        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
	          @current-change="pageChange">
	        </el-pagination>
	    </div>
	    
	    
	    
	    <el-dialog title="修改物料工艺" :visible.sync="updateDialog" >
		  <el-form :model="updateData" style='padding:0 10px;'>
		    <el-form-item label="物料名称" >
		      <el-input v-model="updateData.materialType" auto-complete="off" disabled class="form-input"></el-input>
		    </el-form-item>
		    <el-form-item label="工艺名称" >
		      <el-input v-model="updateData.technology" auto-complete="off" class="form-input"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="updateDialog = false">取 消</el-button>
		    <el-button type="primary" @click="updateMaterialTechnology()">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
	<script src="../myJs/importFile.js"></script>
	<script>
		importFile();
	</script>
	<script src="../vueSystem/components/sysCommonSearch.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: function () {
				// 搜索条件
				return {
					search: {
						status:0,
						technologyWhere:'',
						materialTypeWhere:''
					},
					oldSearch:{
						status:0,
						technologyWhere:'',
						materialTypeWhere:''
					},
					status: [{
						id: 0,
						name: '使用'
					}, {
						id: 2,
						name: '禁用'
					}],
					addParam: {
						materialType: '',
						technology: ''
					},
					updateData:{
						id:'',
						materialType:'',
						technology:''
					},
					loading: false,
					updateDialog:false,
					moment: moment,
					materialTypeList: [],
					materialTechnologyList:[],
					pagination: {
						currentPage: 1,
						totalCount: 0,
						pageSize: 10
					}
				};
			},
			created: function () {
				this.setMaterialList();
				this.getMaterialTechnology(true);
			},
			methods: {
				//设置物料集合
				setMaterialList:function () {
					var self = this;
					ajaxRequest("basicData/getRowMaterialType",{"isvolid":1}).then(function(res){
						self.materialTypeList = res;
					}).catch(function(error){
						console.log(error);
					});
				},
				getMaterialTechnology:function(bool){
					var self=this;
					var search=this.search;
					if(bool){
					    this.oldSearch=_.cloneDeep(search);
					    this.pagination.currentPage=1;
					}
					search = _.cloneDeep(this.oldSearch);
					search.start=(this.pagination.currentPage-1)*this.pagination.pageSize;
					search.length=this.pagination.pageSize;
					ajaxRequest("materialTypeTechnology/getCompanyMaterialTechnology",search).then(function(res){
						if(!bool){
							self.search=_.cloneDeep(self.oldSearch);
						}
						self.pagination.totalCount=res.iTotalRecords;
						self.materialTechnologyList = res.returnData;
					}).catch(function(error){
						console.log(error);
					});
				},
				addMaterialTechnology:function(){
					var self=this;
					var param=this.addParam;
					ajaxRequest("materialTypeTechnology/addMaterialTechnology",param).then(function(res){
						self.$message({
					          showClose: true,
					          message: res,
					          type: 'success'
					       });
						self.getMaterialTechnology(false);
					}).catch(function(error){
						console.log(error);
					});
				},
				pageChange:function(){
					this.getMaterialTechnology(false);
				},
				updateDialogShow:function(row){
					this.updateDialog=true;
					this.updateData=row;
				},
				setStatus:function(row,status){
					var self=this;
					var param={
							id:row.id,
							status:status
					}
					ajaxRequest("materialTypeTechnology/setStatus",param).then(function(res){
						self.$message({
					          showClose: true,
					          message: res,
					          type: 'success'
					       });
						self.getMaterialTechnology(false);
					}).catch(function(error){
						console.log(error);
					});
				},
				updateMaterialTechnology:function(){
					var self=this;
					var param=this.updateData;
					ajaxRequest("materialTypeTechnology/updateMaterialTechnology",param).then(function(res){
						self.$message({
					          showClose: true,
					          message: res,
					          type: 'success'
					       });
						self.getMaterialTechnology(false);
						self.updateDialog=false;
					}).catch(function(error){
						console.log(error);
					});
				},
				exportExcle:function(){
					this.search = _.cloneDeep(this.oldSearch);
			        var formParam = SysUtil.formatFormParam(this.search);
			        var basePath = SysUtil.getBasePath();
			        var path=`${basePath}/materialTypeTechnology/downlodeMaterialTechnology?${formParam}`;
			        window.open(path);
				}
			}
		});
	</script>
</body>

<style>
	.searchDiv {
		margin-top: 10px;
	}

	.form-input {
		width: 200px;
	}

	.elForm {
		float: left;
		width: 600px;
	}
    .elForm2{
	    float:left;
	    width: 500px;
    }
</style>

</html>